<template>
  <ContentWrap :body-style="{ padding: 0 }" class="spuItem">
    <el-row class="w-100%">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-image :fit="'cover'" :src="spuItem.picUrl || defaultProductImg" />
      </el-col>
      <el-col
        :xs="24"
        :sm="24"
        :md="24"
        :lg="24"
        :xl="24"
        v-if="spuItem.buyEnable != null && !spuItem.buyEnable"
      >
        <div class="!w-full top-0 pos-absolute">
          <!-- 已限购  -->
          <el-image
            :fit="'scale-down'"
            :src="purchaseIcon"
            class="!bg-black"
            style="opacity: 0.4"
          />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-text line-clamp="2" class="goods-title custom-text-16 c-[#11192d]! .dark:c-[#fff]!">
          <SpuTag :type="DICT_TYPE.PRODUCT_SPU_TYPE" :value="spuItem.spuType" />
          {{ spuItem.spuName || spuItem.titleName }}
        </el-text>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-text line-clamp="1">
          <div class="flex flex-row flex-wrap min-h-24px">
            <el-tag
              class="mr-2px"
              v-for="item in getRewardActivityRuleItemDescriptions(spuItem.rewardActivity).slice(
                0,
                1
              )"
              :key="item"
            >
              {{ item }}</el-tag
            >
          </div>
        </el-text>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="flex items-baseline">
          <div class="custom-text-16 goods-price flex items-baseline">
            <!-- <span class="custom-text-12"> ￥ </span> -->
            <span class="whitespace-nowrap">
              {{ spuItem.priceRange ? spuItem.priceRange : '&nbsp;' }}
              <!-- {{ isArray(spuItem.price) ? fenToYuan(spuItem.price[0]) : fenToYuan(spuItem.price) }} -->
            </span>
          </div>
          <!-- <div class="custom-text-12 decoration-line-through m-l-5px" v-if="spuItem.marketPrice > 0"
            >￥{{ fenToYuan(spuItem.marketPrice) }}
          </div> -->
        </div>
      </el-col>

      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <slot name="itemButton"></slot>
      </el-col>
    </el-row>
  </ContentWrap>
</template>
<script setup lang="ts" name="spuItem">
import { onMounted } from 'vue'
import { propTypes } from '@/utils/propTypes'

import { getRewardActivityRuleItemDescriptions } from '@/views/shop/hooks/useGoods'

import { DICT_TYPE } from '@/utils/dict'
import defaultProductImg from '@/assets/imgs/default-product-img.jpg' //默认商品图
import purchaseIcon from '@/assets/imgs/purchase-icon.png' //待激活

import SpuTag from '@/components/SpuTag/src/SpuTag.vue'
defineProps({
  // 选中的门店列表
  spuItem: propTypes.object.def({})
})

onMounted(() => {})
</script>
<style lang="scss" scoped>
.spuItem {
  border: 1px solid var(--el-card-bg-color) !important;
  &:hover {
    border: 1px solid var(--el-color-primary) !important;
    padding: 2px;
  }
}
.goods-title {
  font-weight: 500;
  height: 48px;
  line-height: 24px;
}
.goods-price {
  font-weight: 700;
  color: #ff6200;
}

:deep(.el-image) {
  border-radius: 2px;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}
:deep(.el-image__inner) {
  position: absolute !important;
}
</style>
